<template>
  <div style="color:#fff" class="talk-header">
    <van-nav-bar :title="roomInfo.name" left-text="返回" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
      <template #right>
        <van-icon v-if="roomInfo.type=='group'" name="friends-o" size="18" />
        <van-icon v-if="roomInfo.type=='user'" name="maneger-o" size="18" />
      </template>
    </van-nav-bar>

  </div>
  <div class="talk-body">
    <van-pull-refresh class="talk-list" v-model="talk.refreshing" @refresh="onRefresh" :disabled="!talk.canRreshing">
      <van-list v-model:loading="talk.loading" :finished="talk.finished">
        <div class="talkWrap" ref="talkWrap">
          <div :class=" item.isMy ? 'talk-li' : 'talk-li2'" v-for="item in talk.list" :key="item" :value="item">
            <div class="talk-li-img">
              <img :src="item.avatar" />
            </div>
            <div class="talk-li-name">
              {{item.name}}
            </div>
            <div class="talk-li-msg">
              {{item.msg}}
            </div>
            <div class="talk-li-date">
              {{item.date}}
            </div>
            <div class="clear"></div>
          </div>

        </div>
      </van-list>
    </van-pull-refresh>
    <SendBox class="sendbox"/>
  </div>
</template>

<script>
  import { useRoute} from 'vue-router'
  import {reactive, ref } from 'vue'
  import router from '@/router'
  import SendBox from './sendBox.vue';
  export default {
    name: 'Room',
    components: {
      SendBox
    },
    setup() {

      let router = useRoute()
      const ssid = router.params.ssid
      const mySsid = window.Tls.store("userinfo").ssid
      let talkWrap = ref(null)
      let roomInfo = reactive({
        type: "user", // user group
        name: "加载中..",
      })
      let talk = reactive({
        refreshing: true,
        canRreshing: true,
        loading: true,
        finished: false,
        list: [

        ],
        lastID: 0,

      })
      return {
        ssid,
        mySsid,
        roomInfo,
        talk,
        talkWrap
      }

    },
    mounted() {
      var ws = new WebSocket("ws://124.70.188.95:3032/ws");
      ws.onopen = function(){
        //当WebSocket创建成功时，触发onopen事件
        console.log("open");
        ws.send("hello"); //将消息发送到服务端
      }
      ws.onmessage = function(e){
        //当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
        console.log(e.data);
      }
      ws.onclose = function(){
        //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
        console.log("close");
      }
      ws.onerror = function(e){
        //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
        console.log(e);
      }
      const it = this
      window.Tls.post("/test", {
        ssid: it.ssid
      }, {
        noToast: true
      }).then(() => {
        it.roomInfo.type = 'group'
        it.roomInfo.name = 'We Are Family'
      })
      it.getTalkHistory()
      this.talkWrap.style.height = (window.innerHeight - 106) + 'px'
      it.talkWrap.addEventListener('scroll', () => {
        if (it.talkWrap.scrollTop > 0) it.talk.canRreshing = false
        else it.talk.canRreshing = true
      })
    },
    methods: {
      getTalkHistory() {
        const it = this

        window.Tls.post('/talk/msgHistory', {
          ssid: it.ssid,
          lastID: it.lastID
        }, {
          noToast: true
        }).then(() => {
          let a = parseInt(Math.random() * 10),
            b = a + parseInt(Math.random() * 20),
            c = parseInt(Math.random() * 50),
            d = c + parseInt(Math.random() * 40)+10
          let msg = {
            ssid: 'abcdeee',
            name: 'ahcdzjadldkzgcflajsfdnsbfesedv'.substring(a, b),
            avatar: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3437477200,345832242&fm=26&gp=0.jpg',
            msg: '我书打算打打死大大声道搭建给的圣诞节迪士尼反倒gfghfgfhdg是三大asd萨达萨达撒所多撒多大大adass奥术大师多库阿斯达经典款的说法sd第三方士大夫科技啥dasd都看见爱上打啊实打实断说大声道'
              .substring(c, d),
            sendSsid: Math.random() > 0.5 ? 'abcdeee' : it.mySsid,
            date: '09:18',

          }
          if (msg.sendSsid == it.mySsid) msg.isMy = 1
          else msg.isMy = 0
          it.talk.list.unshift(msg)
          it.talk.lastID = 0
          it.onLoad()

        }).catch((e) => {
          // 手动点击重试
          console.log(e)
        })
      },
      onClickLeft() {
        router.push('/list')
      },
      onClickRight() {

      },
      onLoad() {
        this.talk.loading = false
        this.talk.finished = true
        this.talk.refreshing = false
      },
      onRefresh() {
        const it = this
        //下拉获取新的聊天记录
        it.getTalkHistory()
      }
    },
  }
</script>
<style scoped="">
  .talk-body {
    height: calc(100% - 46px);
    background: #eee;
  }

  .talk-li,
  .talk-li2 {
    width: 100%;
    min-height: 100px;
    /* background: #fff; */
    margin-bottom: 1px;
    position: relative;
    margin-top: 20px;
    top: 5px;
  }

  .talk-li .talk-li-img {

    right: 5px;

  }

  .talk-li2 .talk-li-img {

    left: 5px;

  }

  .talk-li-img {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 5px;
    border: 1px solid #eee;
    overflow: hidden;
    top: 10px;
  }

  .talk-li-img img {
    width: 100%;
    height: 100%;
  }

  .talk-li-date {
    position: absolute;
    top: -20px;
    left: 0;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    height: 20px;
    color: #aaa;
    width: 100%;
  
  }

  .talk-li-msg {
    max-width: calc(100% - 90px);
    width: auto;
    display: inline-block;
    padding: 5px 10px;    
    margin-top: 10px;
    color: #fff;
    font-size: 14px;
    border-radius: 5px;
    line-height: 24px;
  }

  .talk-li .talk-li-msg {
    float: right;
    margin-right: 70px;
    background: #5ecc70;
  }

  .talk-li2 .talk-li-msg {
    float: left;
    margin-left: 70px;
    background: #ef6ac0;
    color: #fff;
  }

  .talk-li-name {
    position: absolute;
    top: 75px;
    font-size: 12px;
    color:#999;
    width: 60px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }

  .talk-li .talk-li-name {
    right: 5px;
  }

  .talk-li2 .talk-li-name {
    left: 5px;
  }

  .talk-list {
    height: calc(100% - 50px);
  }

  .talkWrap {
    overflow-y: scroll;
  }

</style>
